<template>
    <p style="line-height: 3.125rem; font-size: 1rem; font-weight: bold" class="main_text">积分兑换管理</p>
    <div class="main">
        <!--     查询 #################################### -->
        <div class="main_nav p20 ">
            <el-form :model="pointsInquiry" class="df ">
                <el-form-item label="兑换流水号" class="mr20" style="width: 20%;">
                    <el-input v-model="pointsInquiry.flowSn" />
                </el-form-item>
                <el-form-item label="兑换商品" class="mr20" style="width: 20%;">
                    <el-input v-model="pointsInquiry.goodsName" />
                </el-form-item>
                <el-form-item label="兑换账号" class="mr20" style="width: 20%;">
                    <el-input v-model="pointsInquiry.exchangeAccount" />
                </el-form-item>
                <el-form-item label="商品状态" class="mr20" style="width: 20%;">
                    <el-input v-model="pointsInquiry.goodsStatus" />
                </el-form-item>
                <el-form-item style="width: 20%;">
                    <div class="df">
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                        <el-button type="primary" plain @click="handleReset">重置</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <!-- #################################### 表单 #################################### -->
        <div class="content p20 mt20">
            <el-button type="danger" plain @click="handleSelectionChange">批量删除</el-button>

            <el-table @selection-change="handleSelectionChange" :data="tableList" style="width: 100%" class="mt20"
                :header-cell-style="{ background: '#f0f6fe' }" max-height="450" border>
                <el-table-column type="selection" />
                <el-table-column label="兑换流水号" prop="flowSn" />
                <el-table-column label="兑换商品" prop="goodsName" />
                <el-table-column label="兑换账号" prop="exchangeAccount" />
                <el-table-column label="所需积分" prop="requiredIntegral" />
                <el-table-column label="商品状态" prop="childType">
                    <template #default="props">
                        <el-tag type="success">待支付</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="兑换时间" prop="childType" />
                <el-table-column label="操作" fixed="right" width="120">
                    <template #default="props">
                        <el-button size="small" link type="primary" @click="edit(props.row)">发货</el-button>
                        <el-button size="small" link type="danger" @click="deleteData(props.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- #################################### 分页 #################################### 
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[100, 200, 300, 400]" small
            background layout="prev,total, pager, next" :total="total" class="mt20" />
    </div>-->
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { RequestPointList, RequestPoinDeleteList } from '@/api/path/index.js'
// import { Expand, Delete, Calendar } from '@element-plus/icons-vue'
onMounted(() => {
    // initSearch()
})
/*积分查询参数*/
const pointsInquiry = ref({
    "page": 1,
    "rows": 10,
    //兑换账号
    "exchangeAccount": '',
    //兑换商品名称
    "goodsName": "",
    //兑换流水号
    "flowSn": "",
    //兑换商品状态
    "goodsStatus": ""
})
//积分查询列表 
const tableList = ref()
const total = ref()
const initSearch = async () => {
    let { resultObj: { list, count } } = await RequestPointList(pointsInquiry.value)
    tableList.value = list;
    total.value = count
}

const handleSearch = () => {
    initSearch()
}
const handleReset = () => {
    Object.assign(pointsInquiry.value, {
        "page": 1,
        "rows": 10,
        "exchangeAccount": '',
        "goodsName": "",
        "flowSn": "",
        "goodsStatus": ""
    })
    // initSearch()
}

//批量删除
const listIds = ref<string[]>([])
const handleSelectionChange = () => {
    val.forEach((item: any) => listIds.value.push(item.id));
}
//全选删除





















// const editCenterDialogVisible = ref<any>(false)
// const centerDialogVisible = ref<any>(false)
// const searchData = ref<any>({
//     value1: '',
//     resource: '',
//     name: '',
// })
// /* 添加的弹窗 */
// const AddData = ref<any>({
//     parentType: '',
//     childType: '',
// })
// /* 修改弹窗 */
// const EditData = ref<any>({
//     parentType: '',
//     childType: '',
// })
// /* 表格 */
// const tableData = ref<any>([{
//     id: 1,
//     parentType: 'as',
//     childType: 'as',
// }])
// /*抽屉*/
// const drawer = ref<any>(false)
// const add = () => {
//     drawer.value = true
// }
// const addData = ref<any>({
//     info: '',
//     name: '',
//     integralType: '',
// })
// /*积分类型*/
// const value = ref<any>('consumption')

// const options = [
//     {
//         value: 'consumption',
//         label: '消费积分',
//     },
//     {
//         value: 'activity',
//         label: '活动积分',
//     },
// ]
// /* ************************ 分页获取数据 ************************ */
// // const total = ref<any>(10)
// const currentPage = ref(1)
// const pageSize = ref(10)
// const handleSizeChange = (val: number) => {
//     console.log(`${val} items per page`)
//     getData()
// }
// const handleCurrentChange = (val: number) => {
//     console.log(`current page: ${val}`)
//     getData()
// }
// // const total = ref()
// const getData = () => {
//     RequestNodeAllowedChildrenTypeGetlistlimit(currentPage.value, pageSize.value).then((res: any) => {
//         tableData.value = res.resultObj.data
//         total.value = res.resultObj.total
//     })
// }
// // getData()
// /* ************************ 添加数据 ************************ */
// const AddList = () => {
//     RequestNodeAllowedChildrenTypeSave(AddData.value).then((res: any) => {
//         if (res.code == 0) {
//             ElMessage.success(res.msg)
//             centerDialogVisible.value = false
//             AddData.value.parentType = ''
//             AddData.value.childType = ''
//             getData()
//         } else {
//             ElMessage.error(res.msg)
//         }
//     })
// }
// /* ************************ 单个删除 ************************ */
// const deleteData = async (id: any) => {
//     RequestNodeAllowedChildrenTypeDel(id).then((res: any) => {
//         if (res.code == 0) {
//             ElMessage.success(res.msg)
//             getData()
//         } else {
//             ElMessage.error(res.msg)
//         }
//     })
// }
// /* ************************ 批量删除 ************************ */
// const ids = ref<any>([])
// const handleSelectionChange = (val: any) => {
//     val.forEach((item: any) => ids.value.push(item.id));
// }
// const AllDelete = () => {
//     con     getData()
//         } else {
//             ElMessage.error(res.msg)
//         }
//     })
// }
// /* ************************ 修改 ************************ */
// const edit = (row: any) => {
//     editCenterDialogVisible.value = true
//     EditData.value = row
// }
// const EditAddData = () => {
//     RequestNodeAllowedChildrenTypeSave(EditData.value).then((res: any) => {
//         if (res.code == 0) {
//             ElMessage.success(res.msg)
//             editCenterDialogVisible.value = false
//             getData()
//         } else {
//             ElMessage.error(res.msg)
//         }
//     })
// }st formimgs = new FormData()
//     formimgs.append('ids', ids.value)
//     RequestNodeAllowedChildrenTypepostList(formimgs).then((res: any) => {
//         if (res.code == 0) {
//             ElMessage.success(res.msg)

</script>


<style scoped lang="scss">
.main {
    width: 100%;


    .main_nav {
        background-color: #fff;
    }

    .content {
        width: 100%;
        background-color: #fff;

        .drawerText {
            font-size: 1.125rem;
            font-weight: 700;
        }
    }

    :deep(.el-overlay .el-icon svg) {
        color: black;
    }
}

/* 弹出框样式 */
::v-deep .el-overlay {
    .el-dialog__header {
        background-color: #116cf8;
        margin-right: 0;
    }

    .el-dialog__title {
        color: #fff;
    }

    .el-icon svg {
        color: #fff;
    }
}
</style>
